<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>爱问共享资料_在线资料分享平台</title>
    <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.reveal.min.js"></script>
    <script type="text/javascript" src="/js/common.min.js"></script>
    <script type="text/javascript" src="/js/search.min.js"></script>
    <script src="/js/ds.js"></script>
    <script src="/js/messenger.min.js"></script>
    <script type="text/javascript" src="https://static.iask.cn/libjs/fix/mobile.verification.plug.min.js"></script>
    <script type="text/javascript" src="/js/beta.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/iAsk.login.min.css">
    <script type="text/javascript" src="/js/messenger.min.js"></script>
    <script type="text/javascript" src="/js/common.login.plug.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/iShare_base.min.css">
    <link rel="stylesheet" type="text/css" href="/css/iShare_list.min.css">
    <link rel="stylesheet" type="text/css" href="/css/public.min.css">
    <link rel="stylesheet" type="text/css" href="/css/ishare_format.min.css">
    <link rel="stylesheet" type="text/css" href="/css/ishare_nav.min.css ">
    <link rel="stylesheet" type="text/css" href="/css/top_bar.min.css">
    <link rel="stylesheet" type="text/css" href="/css/ishare_nav.min.css">
    <link rel="stylesheet" type="text/css" href="/css/ishare_footer.min.css">
    <link rel="stylesheet" type="text/css" href="/css/crumb.min.css">
    <link href="../css/star.css" rel="stylesheet" type="text/css"/>
    <link href="../css/master.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/js/jquery.jcarousellite.min.js"></script>
    <script type="text/javascript" src="/js/json2.min.js"></script>
    <script type="text/javascript" src="/js/public.min.js"></script>
    <script type="text/javascript" src="/js/iShare.min.js"></script>
    <script type="text/javascript" src="/js/dialog.js"></script>
    <script type="text/javascript" src="/js/ajaxfileupload.js"></script>
</head>
<body>
<div class="top-bar cf"  >
    <div class="top-bar-left">
        <a class="current" href="/jsp/index.jsp">图书爱分享</a>
    </div>
    <div class="fr">
        <div class="user-info"><em style="margin-left: -40px">您好！</em>
            <c:choose>
                <c:when test='${sessionScope.get("user") == null}'>
                    <a class="login-link" href='/jsp/login.jsp' >请登录</a>
                </c:when>
                <c:otherwise>
                    <div class="user-info" style="display:block;">
                        <div class="user-name fl" id="J_user_name">
                            <a href="#">
                                <div class="user-img fl">
                                    <img src="/images/headimg/${sessionScope.get('user').photo}" width="20" height="20">
                                </div>
                                <p class="name">${sessionScope.get("user").nickname}</p>
                                <i class="icon icon-arrow"></i>
                            </a>
                            <div class="user-nav">
                                <p><a id="my-info">我的资料</a></p>
                                <p><a id="modify-password">修改密码</a></p>
                                <p><a href="/user/log_out" class="exit" id="exit"><i class="icon icon-exit"></i>退出</a></p>
                            </div>
                        </div>
                    </div>
                </c:otherwise>
            </c:choose>
        </div>
    </div>
</div>

<div id="common_dialog" class="dialog">
    <a  title="关闭" class="close">关闭</a>
    <div class="dialog-con">
        <h2 name="title">我的信息</h2>
        <div class="dialog-btn-con">
            <span id="uId" style="display: none">${requestScope.get("user").uId}</span>
            <ul class="persion-info">
                <li style="margin-top: 0px">
                    <span for="account">账户:</span>
                    <input class="input-text" id="account" type="text"  disabled="disabled" value="${sessionScope.get('user').account}"/>
                </li>
                <li>
                    <span for="nickname">昵称:</span>
                    <input class="input-text" id="nickname" type="text" value="${sessionScope.get('user').nickname}"/>
                </li>
                <li>
                    <label for="email">邮箱:</label>
                    <input class="input-text" id="email" type="text" value="${sessionScope.get('user').emial}"/>
                </li>
                <li>
                    <input type="button" id="ok-change-info" class="btn" value="确认修改信息"/>
                </li>
            </ul>
            <div class="persion-img" style="margin-left: 30px;">
                <div style="width: 150px;margin-left: 30px;float: left">
                    <img id="headimg" src="/images/headimg/${sessionScope.get('user').photo}" style="width: 150px;height: 150px;"/>
                    <input id="change-headimg"  class="btn" type="button" value="修改头像" style="margin-top: 10px;">
                </div>
                <div id="change-div" style="width:150px;float: left;margin-left: 10px;display: none">
                    <input id="file" name="file" type="file" style="margin-top: 30px;">
                    <input id="ok-change-headimg" class="btn" type="button" value="确认修改" style="margin-top: 30px;">
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

<div id="forbidDialog" class="dialog">
    <a href="javascript:void(0);" class="close" title="关闭">关闭</a>
    <div class="dialog-con">
        <h2>修改密码</h2>
        <div class="block-con">
            <ul >
                <li>
                    <span for="oldpassword">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旧密码:</span>
                    <input class="input-text" id="oldpassword" type="password" />
                </li>
                <li style="margin-top: 20px">
                    <span for="newpassword">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新密码:</span>
                    <input class="input-text" id="newpassword" type="password" />
                </li>
                <li style="margin-top: 20px">
                    <label for="con-password">确认新密码:</label>
                    <input class="input-text" id="con-password" type="password" />
                </li>
            </ul>
        </div>
        <div class="dialog-btn-con btn-block">
            <a href="javascript:void(0);" id="ok-password" class="btn-dialog">确定</a>
        </div>
    </div>
</div>

<div class="pw">
    <div class="mt24 cf" style="margin: 100px;position: relative">
        <div id="s" style="width: 300px;height: 300px;float: left;">
            <img src="/upload/bookimg/${requestScope.get("book").bookImg}" style="width: 300px;height: 300px;">
        </div>
        <div style="margin-left:20px;width: 400px;height: auto;float: left;font-size: 15px;">
            <div id="book-name" style="font-family: '微软雅黑';color: black;font-size: 24px;">${requestScope.get("book").bookName}</div>
            <p  style="margin-top: 12px;">作者:&nbsp;&nbsp;<span style="color: #dd4a22;">${requestScope.get("book").bookAnthou}</span></p>
            <p  style="margin-top: 12px;">上传者:&nbsp;&nbsp;<span style="color: #1d8bae">${requestScope.get("book").user.nickname}</span></p>
            <p style="margin-top: 12px">评分:<span id="score" class="allstar00 score" style="margin-left: 20px;" >
            </span><c:choose>
                <c:when test="${requestScope.get('book').score == 0}">
                    (暂无评分)
                </c:when>
                <c:otherwise>
                    （${requestScope.get("book").score}分)
                </c:otherwise>
            </c:choose></p>
            <p style="margin-top: 12px">格式：<span style="margin-left: 20px;font-size: 18px;">.${requestScope.get("book").format}</span></p>
            <p style="margin-top: 12px">下载量：<span style="margin-left: 20px;font-size: 18px;">${requestScope.get("book").downloadNumber}</span>次下载</p>
            <p style="margin-top: 12px">
                <a href="/user/download_book?b_id=${requestScope.get('book').bookId}" class="btn-a" style="background: red;color: white;">下载</a>
                <a id="preview"   class="btn-a" target="_blank" style="background: green;margin-left: 20px;color: white;">在线预览</a>
            </p>
        </div>
        <script>
            var score ="${requestScope.get("book").score}";
            if (score < 1.0){
                $("#score").attr("class","allstar00 score")
            }else if (score < 2.0){
                $("#score").attr("class","allstar10 score")
            }else if ( score < 3.0){
                $("#score").attr("class","allstar20 score")
            }else if (score < 4.0){
                $("#score").attr("class","allstar30 score")
            }else if (score <5.0 ){
                $("#score").attr("class","allstar40 score")
            }else {
                $("#score").attr("class","allstar50 score")
            }
            //判断用户是否登录
            $("#preview").click(function () {
                if (${sessionScope.get("user") == null}){
                    alert("请先登录，登录之后才能图书预览的");
                    return;
                }else {
                    $("#preview").attr("href","/upload/${requestScope.get('book').download}");
                }
            })
        </script>
    </div>
    <div style="width: 100%;">
        <h2 style="color: #f46b45;">图书简介</h2>
        <div style="width: 100%;margin: 20px">&nbsp;&nbsp;
            ${requestScope.get("book").bookDetails}
        </div>
    </div>
    <div>
       <h2 style="color: #00a6de">图书评价</h2>
       <div style="width: 100%;">
            <div style="margin:20px;width: 800px;height: auto;min-height: 50px;">
                <textarea id="comment" placeholder="如果您已经读过这本书，请评价一下这本书吧！" style="margin: 10px;width: 760px;min-height: 30px;font-size: 16px;"></textarea>
                <span style="font-size: 14px;margin-top: 1px;float: left;margin-left: 15px;color: sandybrown">打分:</span>
                <div style="width: 150px;height: 25px;margin-left: 10px;float: left">
                    <iframe id="iframe1" src="/html/index.html" style="background: white;border: 0px;width: 100px;height: 21px;margin-top: 5px;"></iframe>
                </div>
                <input id="btn-comment" type="button" value="评论" style="color:beige;float:right;margin-right: 20px;width: 70px;height:35px;background: #1b8bad;border-radius: 7px;"/>
                <script>
                    $("#btn-comment").click(function () {
                        if (${sessionScope.get("user") == null}){
                            alert("请先登录，登录之后才能进行评论");
                            return;
                        }
                        var score = $("#iframe1").contents().find("input[name='score']");
                        var star = score.val();
                        if (star == undefined || star ==""){
                            alert("请先对这本书打分，再提交评论");
                            return;
                        }
                        var content = $("#comment").val();
                        $("#btn-comment").attr("disabled","disabled");
                        $.ajax({
                            url:"/user/add_comment",
                            type:"POST",
                            dataType : "json",
                            data:{
                                "bookId":"${requestScope.get("book").bookId}",
                                "score":star,
                                "content":content
                            },
                            success: function (result) {
                                alert(result);
                                location.reload();
                            }
                        })
                    })
                </script>
            </div>
           <div style="width:1100px;margin:20px;margin-top: 50px;">
               <span style="font-size: 14px;color: grey;margin-left: 10px;">读者评价：</span>
               <ul id="comments-ul">
                   <script>
                       $.get("/comment/get_comments_by_page?pageNum=1&pageSize=10&bookId=${requestScope.get("book").bookId}",function (result) {
                           var json = JSON.parse(result);
                           var list = json.list;
                           for(var i=0;i<list.length;i++){
                               $("#comments-ul").append('  <li class="comment">\n' +
                                   '                       <img  src="/images/headimg/'+list[i].user.photo+'" style="width:40px;height40px;border-radius: 100%;float: left">\n' +
                                   '                       <div class="comment-content">\n' +
                                   '                           <p><span  style="color: #00a6de;">'+list[i].user.nickname+'</span>\n' +
                                   '                               <span class="allstar'+list[i].score+'0" style="margin-left: 30px;"></span>\n' +
                                   '                               <span style="float: right">'+list[i].dateTime+'</span></p>\n' +
                                   '                           <div style="width: 100%;margin: 10px;">'+list[i].include+'</div>\n' +
                                   '                       </div>\n' +
                                   '                   </li>')
                           }
                       })
                   </script>
               </ul>
           </div>
       </div>
    </div>
</div>
<div class="footer-con mt30">
    <div class="pw footer">
        <div class="copy-con">
            <p class="footer-nav">
                <a href="/agreement.html" rel="nofollow" target="_blank">网站声明</a>
                <a href="/infringement.html" rel="nofollow" target="_blank">侵权处理</a>
                <a href="https://iask.sina.com.cn/helpCenter/ishare.html" rel="nofollow" target="_blank">帮助中心</a>
                <a href="https://iask.sina.com.cn" target="_blank">爱问首页</a>
                <a href="/sitemap.html" target="_blank">网站地图</a>
                <a href="/feedAndComp/userFeedback" class="user-feedback" target="_blank">意见反馈</a>
            </p>
            <p class="copy-txt">Copyright &copy; 1996-2017 IASK Corporation, All Right Reserved</p>
        </div>
    </div>
</div>
<div class="fix-right">
    <a href="javascript:void(0);" class="fix-item back-top" id="backToTop"><i class="icon-iShare"></i><p>返回<br>顶部</p></a>
</div>
</body>
</html>
